<template>
    <div>
        <el-row>
            <el-col :span="16">
                <el-input disabled type="textarea" required placeholder="选择查看日志的主机，若选择多个，默认查看第一个" v-model="selected_host">
                </el-input>
                <div style="margin: 10px 0">
                    <el-button @click="select_host_view">从主机列表中选择<i class="el-icon-plus el-icon--right"></i></el-button>
                </div>

                <el-input prop="savepath" v-model="savepath" placeholder="请输入目的服务器的保存路径" ></el-input>
                <el-button type="primary" :disabled="is_disabled" @click="start_exec_command">开始查询</el-button>

            </el-col>

            <el-col :span="8" style="text-align: right">
                <el-button @click="connect_websocket()">连接WS</el-button>
                <el-button v-if="has_permission('system_notify_add')" style="float: right" type="primary"
                           @click="close_websocket()">断开WS
                </el-button>
            </el-col>
        </el-row>


            <div style="width:1000px; height:1000px; overflow:auto;
             border:2px solid #000000;background-color:#000000;color:#ffffff;margin: auto">
               631	200316 10:15:51 InnoDB: Mutexes and rw_locks use GCC atomic builtins   <br>
               632	200316 10:15:51 InnoDB: Compressed tables use zlib 1.2.7   <br>
               633	200316 10:15:51 InnoDB: Using Linux native AIO   <br>
               634	200316 10:15:51 InnoDB: Initializing buffer pool, size = 128.0M   <br>
               635	200316 10:15:51 InnoDB: Completed initialization of buffer pool   <br>
               636	200316 10:15:52 InnoDB: highest supported file format is Barracuda.   <br>
               637	InnoDB: The log sequence number in ibdata files does not match   <br>
               638	InnoDB: the log sequence number in the ib_logfiles!   <br>
               639	InnoDB: Restoring possible half-written data pages from the doublewrite buffer...   <br>
               640	200316 10:15:53  InnoDB: Waiting for the background threads to start   <br>
               641	200316 10:15:54 Percona XtraDB (http://www.percona.com) 5.5.61-MariaDB-38.13 started; log sequence number 1975055   <br>
               642	200316 10:15:54 [Note] Plugin 'FEEDBACK' is disabled.   <br>
               643	200316 10:15:54 [Note] Server socket created on IP: '0.0.0.0'.   <br>
               644	200316 10:15:54 [Note] Event Scheduler: Loaded 0 events   <br>
               645	200316 10:15:54 [Note] /usr/libexec/mysqld: ready for connections.   <br>
               646	Version: '5.5.64-MariaDB'  socket: '/var/lib/mysql/mysql.sock'  port: 3306  MariaDB Server   <br>
               647	200327 08:57:11 mysqld_safe Starting mysqld daemon with databases from /var/lib/mysql   <br>
               648	200327  8:57:12 [Note] /usr/libexec/mysqld (mysqld 5.5.64-MariaDB) starting as process 1468 ...   <br>
               649	200327  8:57:13 InnoDB: The InnoDB memory heap is disabled   <br>
               650	200327  8:57:13 InnoDB: Mutexes and rw_locks use GCC atomic builtins   <br>
               651	200327  8:57:13 InnoDB: Compressed tables use zlib 1.2.7   <br>
               652	200327  8:57:13 InnoDB: Using Linux native AIO   <br>
               653	200327  8:57:14 InnoDB: Initializing buffer pool, size = 128.0M   <br>
               654	200327  8:57:14 InnoDB: Completed initialization of buffer pool   <br>
               655	200327  8:57:15 InnoDB: highest supported file format is Barracuda.   <br>
               656	InnoDB: The log sequence number in ibdata files does not match   <br>
               657	InnoDB: the log sequence number in the ib_logfiles!   <br>
               658	InnoDB: Restoring possible half-written data pages from the doublewrite buffer...   <br>
               659	200327  8:57:16  InnoDB: Waiting for the background threads to start   <br>
               660	200327  8:57:17 Percona XtraDB (http://www.percona.com) 5.5.61-MariaDB-38.13 started; log sequence number 1975055   <br>
               661	200327  8:57:17 [Note] Plugin 'FEEDBACK' is disabled.   <br>
               662	200327  8:57:17 [Note] Server socket created on IP: '0.0.0.0'.   <br>
               663	200327  8:57:17 [Note] Event Scheduler: Loaded 0 events   <br>
               664	200327  8:57:17 [Note] /usr/libexec/mysqld: ready for connections.   <br>
               665	Version: '5.5.64-MariaDB'  socket: '/var/lib/mysql/mysql.sock'  port: 3306  MariaDB Server   <br>
            </div>
            <!--
             用来展示div的，日志内容，最多列出最后的100行
             -->


        <el-dialog title="主机列表" :visible.sync="dialog_host_view" width="80%" :close-on-click-modal="false">
            <el-row>
                <el-col :span="16">
                    <el-form :inline="true" :model="host_query">
                        <el-form-item>
                            <el-input v-model="host_query.name_field" clearable placeholder="主机名称"></el-input>
                        </el-form-item>
                        <el-select v-model="host_query.zone_field" @change="zone_Search()" clearable placeholder="区域">
                            <el-option v-for="item in zone_options" :key="item" :value="item"></el-option>
                        </el-select>

                        <el-form-item>
                            <el-button type="primary" icon="search" @click="get_hosts()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <el-table :data="hosts.data"  ref="multipleTable"  v-loading="hostLoading" @selection-change="handleSelectionChange"
                      @row-click="handleClickRow" style="width: 100%">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column prop="name" label="主机名称"></el-table-column>
                <el-table-column prop="zone" label="所属区域"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
                <el-table-column prop="ssh_ip" label="SSH连接"></el-table-column>
            </el-table>

            <div class="pagination-bar" v-if="hosts.total > 10">
                <el-pagination
                        @current-change="hostCurrentChange"
                        :current-page="hostCurrentPage" layout="total, prev, pager, next"
                        :total="hosts.total">
                </el-pagination>
            </div>
            <div slot="footer">
                <el-button @click="dialog_host_view=false">取消</el-button>
                <el-button type="primary" @click="save_select_host">确定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                hosts: [],
                exec_command: '',
                dialog_host_view: false,
                hostLoading: false,
                zone_options: [],
                dialog_host_view:false,
                host_query: {
                    name_field: '',
                    zone_field: '',
                },
                selected_host: '',

                multipleSelection: [],
                savepath:'',
            }
        },

        computed: {
            is_disabled() {
                return ! this.exec_command.replace(' ', '') || ! this.selected_host
            }
        },

        methods: {
            handleClickRow(row) {
                this.$refs.multipleTable.toggleRowSelection(row)
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            get_host_zone () {
                this.$http.get('/api/assets/hosts/zone/').then(res => {
                    this.zone_options = res.result
                }, res => this.$layer_message(res.result))
            },

            get_hosts (page) {
                if (!page) page = 1;
                this.hostLoading = true;
                let api_uri = '/api/assets/hosts/';
                this.$http.get(api_uri, {params: {page: page, host_query: this.host_query}}).then(res => {
                    this.hosts = res.result
                }, res => this.$layer_message(res.result)).finally(() => this.hostLoading = false)
            },

            select_host_view () {
                this.dialog_host_view = true;
                this.get_hosts();
                this.get_host_zone();
            },

            connect_websocket (){
                //执行websocket的server进程
            },

            close_websocket(){
                //终止websocket的server进程
            },

            save_select_host() {
                let hosts = [], hosts_id = [];
                for (let v of this.multipleSelection) {
                    hosts.push(`${v.name}(${v.ssh_ip}:${v.ssh_port})`);
                    hosts_id.push(v.id);
                }
                this.selected_host_id = hosts_id;
                this.selected_host = hosts.toString();
                this.dialog_host_view = false;
            },

            hostCurrentChange(val) {
                this.hostCurrentPage = val;
                this.get_hosts(this.hostCurrentPage);
            },

            start_exec_command () {
                //执行websocket的,client的py
            },
        },
    }
</script>
